<template>
    <el-dialog v-model="dialogVisible" title="规格选择" width="80%" top="5vh">
        <el-container style="height:65vh">
            <el-aside width="220px" class="chooseSkuAside">
                <div class="chooseSkuAsideTop">
                    <div class="chooseSkuAsideTopList" :class="{ 'active': activeId === item.id }"
                        v-for="(item, index) in tableData" :key="index" @click="handleChangeActiveId(item.id)">
                        {{ item.name }}
                    </div>
                </div>
                <div class="chooseSkuAsideBottom">
                    <el-pagination background layout="prev, next" :total="total" :current-page="currentPage"
                        :page-size="limit" @current-change="getData" />
                </div>
            </el-aside>
            <el-main>
                <el-checkbox-group v-model="form.list">
                    <el-checkbox v-for="item in list" :key="item" :value="item" border>
                        {{ item }}
                    </el-checkbox>
                </el-checkbox-group>
            </el-main>
        </el-container>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submit">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { getSkusList } from '@/api/skus'
import {
    useInitTable
} from '@/hooks/useCommon'

const dialogVisible = ref(false)
const activeId = ref(0)
const {
    mulitipTableRef,
    handleSelectionChange,
    handleMultiDelete,
    searchForm,
    resetSearchForm,
    tableData,
    loading,
    currentPage,
    total,
    limit,
    getData,
    handleDelete,
    handleStatusChange,
    handleMultiStatusChange
} = useInitTable({
    getList: getSkusList,
    onGetListSuccess: (res) => {
        tableData.value = res.list
        total.value = res.totalCount
        if (tableData.value.length > 0) {
            handleChangeActiveId(tableData.value[0].id)
        }
    }
})

const callbackFunction = ref(null)
const open = (callback = null) => {
    callbackFunction.value = callback
    getData(1)
    dialogVisible.value = true
}

const list = ref([])

const form = reactive({
    name: "",
    list: []
})

const handleChangeActiveId = (id) => {
    activeId.value = id
    list.value = []
    let item = tableData.value.find(o => o.id == id)
    if (item) {
        list.value = item.default.split(",")
        form.name = item.name
    }
}

const submit = () => {
    if (typeof callbackFunction.value == 'function') {
        callbackFunction.value(form)
    }
    dialogVisible.value = false
}

defineExpose({
    open
})
</script>
<style scoped lang="less">
.chooseSkuAside {
    position: relative;
    border-right: 1px solid #eee;

    .chooseSkuAsideTop {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 50px;
        overflow-y: auto;

        .chooseSkuAsideTopList {
            display: flex;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #f4f4f4;
            font-size: 14px;
            color: #7c7c7c;
            cursor: pointer;

            &:hover {
                background-color: rgb(222, 240, 247);
            }
        }

        .active {
            background-color: rgb(222, 240, 247);
        }
    }

    .chooseSkuAsideBottom {
        position: absolute;
        bottom: 0;
        height: 50px;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>